<template>
  <view class="profile-container">
    <view class="profile-header">
      <image 
        class="profile-avatar" 
        :src="userInfo.avatar" 
        mode="aspectFill"
        @click="handleAvatarClick"
      ></image>
      <view class="profile-info">
        <text class="profile-name">{{ userInfo.name }}</text>
        <text class="profile-desc">{{ isLogin ? '点击头像更换头像' : '点击头像登录/注册' }}</text>
      </view>
    </view>
    
    <view class="profile-stats">
      <view class="stat-item">
        <text class="stat-number">0</text>
        <text class="stat-label">关注</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">0</text>
        <text class="stat-label">粉丝</text>
      </view>
      <view class="stat-item">
        <text class="stat-number">0</text>
        <text class="stat-label">动态</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false, 
      userInfo: {
        name: '未登录',
        avatar: '/static/mine.png'
      }
    };
  },
  methods: {
    handleAvatarClick() {
      if (!this.isLogin) {
        console.log("用户未登录，跳转到登录页面");
        uni.navigateTo({
          url: '/pages/tabBar/demos/Logon/Logon' 
        });
      } else {
        console.log("用户已登录，准备更换头像");
        this.chooseAndUploadAvatar();
      }
    },
    chooseAndUploadAvatar() {
      uni.chooseImage({
        count: 1, 
        sourceType: ['album'], 
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]; 
          console.log("选择的图片临时路径:", tempFilePath);
          uni.showLoading({
            title: '正在上传...'
          });
          setTimeout(() => {
          
            
         
            this.userInfo.avatar = newAvatarUrl;
            uni.hideLoading();
            uni.showToast({
              title: '头像更新成功',
              icon: 'success'
            });

            console.log("头像上传成功，新头像URL:", newAvatarUrl);
          }, 1500); // 模拟网络延迟1.5秒
        },
        fail: (err) => {
          console.log("选择图片失败:", err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx; 
}

.profile-header {
  background-color: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}


.profile-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  border: 2px solid #f0f0f0;
  cursor: pointer;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.profile-desc {
  font-size: 28rpx;
  color: #999;
}

.profile-stats {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 26rpx;
  color: #999;
}
</style>